<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link href="./style.css" rel="stylesheet" />
</head>
<body>
    <!-- <my-count /> -->
    原生的demo
    <my-count msg="父组件传的默认值" >
        <div slot="customContent" style="font-weight: bold">父组件传入的插槽</div>
      </my-count>
</body>
<!-- umd方式 -->
<script src="myCount.js"></script>
<script>
    window.onload = function () {
        // 注册
        myCount.js.register()
        const countEle = document.getElementsByTagName('my-count')[0];
        const onChangeMsg = (event) => {
            console.log('父组件：接受子组件',event)
        }
        setTimeout(()=>{
            countEle.msg='父组件通过props传值'
        },2000)
        countEle.addEventListener('sendMsg', onChangeMsg)
    }
</script>
<!-- <script type="module">
    import { register } from './my-count2.js';
    register('my-count');
    const countEle = document.getElementsByTagName('my-count')[0];
    
    const printMsg = (event) => {
        console.log('父组件：接受子组件',event)
    }
    setTimeout(()=>{
        countEle.msg='父组件通过props传值'
    },2000)

    console.log(countEle)
     countEle.addEventListener('sendMsg', printMsg);
  </script>

</html> -->